<div>
  <div class="flex items-start gap-2">
    <% if provider.github? %>
      <iconify-icon icon="mdi:github" width="24" height="24"></iconify-icon>
    <% elsif provider.gitlab? %>
      <iconify-icon icon="mdi:gitlab" width="24" height="24"></iconify-icon>
    <% else %>
      <iconify-icon icon="mdi:docker" width="24" height="24"></iconify-icon>
    <% end %>
    <div>
      <span class="text-sm">
        Connected as <b><%= provider.username %></b>
      </span>
      <% if defined?(@project) && @project.git? %>
        <div class="mt-2">
          <%= render(
            "shared/partials/async_renderer",
            view_model: Async::Github::WebhookStatusViewModel.new(
              current_user,
              project_id: @project.id
            )
          ) %>
        </div>
      <% end %>
    </div>
  </div>

</div>